<template>
	<div class="top">
		<p>修改当前学生信息</p>
		<span @click="goback">返回</span>
	</div>
	<div class="info">
		<el-form
		ref="myForm"
		:model="formData"
		:rules="rules"
		style="width:100%;margin-top: 20px;"
		hide-required-asterisk=true
		>
		<el-row >
			<el-col :span="10">
				<el-form-item prop="stuName" label="姓名:" label-width="100" style="width:80%">
					<el-input v-model="formData.stuName" placeholder="请输入姓名" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="stuSex" label="性别:" label-width="100" style="width:80%">
					<el-select v-model="formData.stuSex" placeholder="请选择性别" style="width:205px">
						<el-option  value="男" />
						<el-option value="女" />
					</el-select>
				</el-form-item>
				<el-form-item prop="stuTime" label="入学时间:" label-width="100" style="width:80%">
					 <el-date-picker
					        v-model="formData.stuTime"
					        type="date"
					        placeholder="请选择入学时间"
					        clearable
							style="width:205px"
					/>
				</el-form-item>
				<el-form-item prop="className" label="班级:" label-width="100" style="width:80%">
					<!-- <el-input v-model="formData.className"  placeholder="请输入班级" style="width:205px"></el-input> -->
					<el-select v-model="formData.clazzName" placeholder="请选择班级" style="width:205px">
						<el-option
						v-for="item in classoptions" 
						:key="item.id" 
						:label="item.value"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="stuAddress" label="籍贯:" label-width="100" style="width:80%">
					<el-cascader
						placeholder="请选择籍贯"
						style="width:205px"
						:options="regionData"
						v-model="word"
						@change="handleChange"
						>
					</el-cascader>
				</el-form-item>
				<el-form-item prop="stuNum" label="学号:" label-width="100" style="width:80%">
					 <el-input v-model="formData.stuNum"  placeholder="请输入学号" style="width:205px"></el-input>
				</el-form-item>
				
				</el-col>
				<el-col :span="12">
					<el-form-item prop="stuPerson" label="监护人:" label-width="100" style="width:80%">
						<el-input v-model="formData.stuPerson"  placeholder="请输入监护人" style="width:205px"></el-input>
					</el-form-item>
					<el-form-item prop="stuAge" label="年龄:" label-width="100" style="width:80%">
						<el-input   v-model="formData.stuAge"  placeholder="请输入年龄" style="width:205px"></el-input>
					</el-form-item>
					<el-form-item prop="stuPhone" label="联系方式:" label-width="100" style="width:80%">
						<el-input v-model="formData.stuPhone"  placeholder="请输入联系方式" style="width:205px"></el-input>
					</el-form-item>
					<el-form-item prop="stuNation" label="民族:" label-width="100" style="width:80%">
						<el-input  v-model="formData.stuNation"  placeholder="请输入民族" style="width:205px"></el-input>
					</el-form-item>
					<el-form-item prop="stuHabby" label="兴趣爱好" label-width="100" style="width:80%">
						<el-input  v-model="formData.stuHabby"  placeholder="请输入兴趣爱好" style="width:205px"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="foobtn">
			<el-button @click="updateinfo()" class="searchBtn" type="info">确定</el-button>
			<el-button @click="stuoldinfo" class="addBtn" type="info" >取消</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { defineEmits,ref,reactive, defineProps} from 'vue';
	import {studentaddinfo,classnames,studetailinfo,stuupdateinfo} from "../api/zhy"
	import type {studentType,studentdelType,studentsearchType,addstuType} from "../modal/zhy";
	import { ElMessage,ElMessageBox} from 'element-plus'
	import { regionData,codeToText,provinceAndCityData,pcTextArr,pcaTextArr, } from 'element-china-area-data'
	let flag=ref(1)
	let myForm=ref(null);
	var emit=defineEmits(["cheupdate"]);
	// 地址三级联动
	let word=ref([])
	let address=""
	let detailAddress=ref("")
	let allAddress;
	let props = defineProps(["item"]);
	console.log(props.item,"chaunnnnn")
	let classoptions=ref([])
	const handleChange=(val)=>{
		console.log(val)
		var valArr=Array.from(val)
		var lastArr=[]
		valArr.forEach(item=>{
			lastArr.push(codeToText[item])
		})
		if(val){
			address=lastArr.join(",")
		}
		console.log(address,"ccccc")
	}
	let formData=reactive({
		stuNum:"",
		stuName:"",
		stuAge:"",
		stuSex:"",
		stuPhone:"",
		stuPerson:"",
		stuNation:"",
		stuAddress:"",
		stuHabby:"",
		clazzName:"",
		stuTime:"",
	});
	formData=props.item
	const goback=()=>{
		emit("cheupdate",flag.value);
		// ElMessage.error("信息已清空")
	}
	// 要验证那些数据  是否必填 提示信息 失去焦点时提示
		let rules=reactive({
			stuNum:[
				{required:true,message:"学号不能为空",trigger:"blur"}
			],
			stuName:[
				{required:true,message:"姓名不能为空",trigger:"blur"}
			],
			stuAge:[
				{required:true,message:"年龄不能为空",trigger:"blur"}
			],
			stuSex:[
				{required:true,message:"性别不能为空",trigger:"blur"}
			],
			stuPhone:[
				{ required: true, message: '联系方式不能为空', trigger: 'blur' },
				{ pattern:/^1([3-9])\d{9}$/, message: '请输入正确手机号', trigger: 'blur' },
			],
			stuPerson:[
				{required:true,message:"监护人不能为空",trigger:"blur"}
			],
			stuNation:[
				{required:true,message:"民族不能为空",trigger:"blur"}
			],
			stuAddress:[
				{required:true,message:"籍贯不能为空",trigger:"blur"}
			],
			stuHabby:[
				{required:true,message:"爱好不能为空",trigger:"blur"}
			],
			className:[
				{required:true,message:"班级不能为空",trigger:"blur"}
			],
			stuTime:[
				{required:true,message:"入学时间不能为空",trigger:"change"}
			],
		})
	//时间处理
	const filterTime=(time)=>{
		var date = new Date(time);
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		m = m < 10 ? "0" + m : m;
		var d = date.getDate();
		d = d < 10 ? "0" + d : d;
		return y + "-" + m + "-" + d;
	}
	//班级
	const initclassname=async()=>{
		let res=await classnames({
			pageIndex:1,
			pageSize:6,
		})
		console.log(res.data,"太难记   ")
		var sum = res.data
		for (var i = 0; i < sum.length; i++) {
			var s= {
				value: sum[i].clazzName,
				id: sum[i].clazzId
			}
			classoptions.value = [s, ...classoptions.value]
		}
	}
	initclassname()
	// 地址回显
	const showAddress=(allAddress)=>{
		// var addressStr="河北省 石家庄市 长安区"
		console.log(allAddress,"ccc")
		var addressArr=allAddress.split(",")
		console.log(addressArr,"数组")
		var provinceStr=addressArr[0]
		var cityStr=addressArr[1]
		var areaStr=addressArr[2]
		let p=regionData.find(v=>v.label==provinceStr)
		let c=p.children.find(v=>v.label==cityStr)
		let a=c.children.find(v=>v.label==areaStr)
		console.log(p.value,c.value,a.value)
		word.value=[p.value,c.value,a.value]
		handleChange(word.value)
		console.log(word.value,"表单地址")
	}
	showAddress(props.item.stuAddress)
	//修改信息
	const updateinfo=async()=>{
		// if
		let res=await stuupdateinfo({
			stuId:props.item.stuId,
			clazzId:formData.clazzId,
			stuNum:formData.stuNum,
			stuName:formData.stuName,
			stuAge:formData.stuAge,
			stuSex:formData.stuSex,
			stuPhone:formData.stuPhone,
			stuPerson:formData.stuPerson,
			stuNation:formData.stuNation,
			stuAddress:address,
			stuHabby:formData.stuHabby,
			clazzName:formData.clazzName,
			stuTime:formData.stuTime,
		})
		console.log(res,"修改信息")
		if(res==1){
			emit("cheupdate",flag.value);
			ElMessage.success("学生信息修改成功") 
		}

	}
	//信息详情
	const initstudetail=async()=>{
		let res=await studetailinfo({
			stuId:formData.stuId,
		})
		// formData=res[0]
		Object.assign(formData,res[0])
		allAddress=formData.stuAddress
		showAddress(allAddress)
		console.log(formData,"学生详情....")
	}
	//点击取消信息变会原来
	const stuoldinfo=()=>{
		initstudetail()
	}
</script>

<style scoped lang="less">
	.top{
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	        p{
	            font-size: 21px;
	            font-weight: 600;
	        }
	        span{
	            font-size: 17px;
	        }
	    }

	p:hover{
		cursor: pointer;
	}
	.foobtn{
		width: 300px;
		margin: 35px 200px;
		display: flex;
		justify-content:space-between;
	}
	button:hover{
		cursor: pointer;
	}
	.searchBtn{
	    background-color: #106ab1;
	    border: none;
	}
	span:hover{
		cursor: pointer;
	}
</style>